<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>总览模块 - BI面板</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#165DFF',
              secondary: '#36CFC9',
              success: '#52C41A',
              warning: '#FAAD14',
              danger: '#FF4D4F',
              info: '#8C8C8C',
              light: '#F5F7FA',
              dark: '#1D2129',
              'card-bg': '#FFFFFF',
              'chart-bg': '#F9FAFB'
            },
            fontFamily: {
              sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
            },
            spacing: {
              '18': '4.5rem',
              '22': '5.5rem'
            }
          }
        }
      };
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
          .content-auto {
              content-visibility: auto;
          }
          .card-shadow {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          }
          .text-balance {
              text-wrap: balance;
          }
          .scrollbar-hide::-webkit-scrollbar {
              display: none;
          }
          .scrollbar-hide {
              -ms-overflow-style: none;
              scrollbar-width: none;
          }
          .progress-bar {
              height: 6px;
              border-radius: 3px;
              overflow: hidden;
          }
          .progress-value {
              height: 100%;
              border-radius: 3px;
              transition: width 0.5s ease;
          }
          /* 手机外框样式 */
          .phone-frame {
              width: 414px;
              height: 896px;
              background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
              border-radius: 45px;
              padding: 14px;
              box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 
                          0 0 0 2px rgba(255, 255, 255, 0.05) inset,
                          0 0 20px rgba(0, 0, 0, 0.2);
              position: relative;
              margin: 40px auto;
          }
          .phone-screen {
              width: 100%;
              height: 100%;
              background: white;
              border-radius: 35px;
              overflow-y: auto;
              overflow-x: hidden;
              position: relative;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
          }
          /* 隐藏手机屏幕的滚动条，保持美观 */
          .phone-screen::-webkit-scrollbar {
              display: none;
          }
          .phone-screen {
              -ms-overflow-style: none;
              scrollbar-width: none;
          }
          .phone-notch {
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 200px;
              height: 32px;
              background: #1a1a1a;
              border-radius: 0 0 20px 20px;
              z-index: 1000;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          }
          .phone-notch::before {
              content: '';
              position: absolute;
              top: 10px;
              left: 50%;
              transform: translateX(-50%);
              width: 70px;
              height: 6px;
              background: #333;
              border-radius: 3px;
          }
          .phone-notch::after {
              content: '';
              position: absolute;
              top: 10px;
              right: 25px;
              width: 8px;
              height: 8px;
              background: #1a5d2e;
              border-radius: 50%;
              box-shadow: 0 0 6px rgba(26, 255, 46, 0.8);
          }
          .phone-button {
              position: absolute;
              background: linear-gradient(90deg, #0a0a0a, #1a1a1a);
              border-radius: 3px;
              box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
          }
          .phone-button.power {
              right: -5px;
              top: 160px;
              width: 5px;
              height: 90px;
              border-radius: 0 3px 3px 0;
          }
          .phone-button.volume-up {
              left: -5px;
              top: 140px;
              width: 5px;
              height: 60px;
              border-radius: 3px 0 0 3px;
          }
          .phone-button.volume-down {
              left: -5px;
              top: 210px;
              width: 5px;
              height: 60px;
              border-radius: 3px 0 0 3px;
          }
          /* ActionSheet 样式 */
          .action-sheet-overlay {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.5);
              z-index: 1000;
              opacity: 0;
              visibility: hidden;
              transition: opacity 0.3s ease, visibility 0.3s ease;
          }
          .action-sheet-overlay.show {
              opacity: 1;
              visibility: visible;
          }
          .action-sheet {
              position: fixed;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: #FFFFFF;
              border-radius: 16px 16px 0 0;
              z-index: 1001;
              transform: translateY(100%);
              transition: transform 0.3s ease;
              max-height: 70vh;
              overflow-y: auto;
          }
          .action-sheet.show {
              transform: translateY(0);
          }
          .action-sheet-header {
              padding: 16px;
              border-bottom: 1px solid #F2F3F5;
              display: flex;
              justify-content: space-between;
              align-items: center;
          }
          .action-sheet-title {
              font-size: 16px;
              font-weight: 600;
              color: #1D2129;
          }
          .action-sheet-close {
              background: none;
              border: none;
              font-size: 20px;
              color: #8C8C8C;
              cursor: pointer;
              padding: 0;
              width: 24px;
              height: 24px;
              display: flex;
              align-items: center;
              justify-content: center;
          }
          .action-sheet-body {
              padding: 8px 0;
          }
          .action-sheet-item {
              padding: 16px;
              font-size: 16px;
              color: #1D2129;
              cursor: pointer;
              transition: background-color 0.2s ease;
              display: flex;
              align-items: center;
              justify-content: space-between;
          }
          .action-sheet-item:hover {
              background-color: #F5F7FA;
          }
          .action-sheet-item.active {
              color: #165DFF;
          }
          .action-sheet-item.active::after {
              content: '✓';
              color: #165DFF;
              font-weight: bold;
          }
      }
    </style>
  </head>
  <body class="font-sans text-dark" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center;">
    <!-- 手机外框 -->
    <div class="phone-frame">
      <!-- 刘海屏 -->
      <div class="phone-notch"></div>
      
      <!-- 音量按钮 -->
      <div class="phone-button volume-up"></div>
      <div class="phone-button volume-down"></div>
      
      <!-- 电源按钮 -->
      <div class="phone-button power"></div>
      
      <!-- 手机屏幕 -->
      <div class="phone-screen">
        <!-- 与公共区域页面iframe容器的内边距 -->
        <div class="p-4 pt-10">
      <!-- 同城会筛选器 -->
      <div class="mb-6">
        <div class="flex items-center justify-between mb-3">
          <div class="flex space-x-2">
            <button
              id="city-meeting-btn"
              class="px-4 py-1.5 bg-primary text-white rounded-full text-sm font-medium h-8 min-w-[88px] flex items-center justify-center"
            >
              同城会
              <i class="fas fa-chevron-down ml-1 text-xs"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- 财务指标 -->
      <section class="mb-6">
        <h2 class="text-lg font-semibold mb-4">财务指标</h2>
        <!-- 财务卡片组 -->
        <div class="grid grid-cols-1 gap-4 mb-6">
          <!-- 历史总业绩 -->
          <div class="bg-card-bg rounded-xl p-5 card-shadow">
            <div class="flex justify-between items-start mb-4">
              <h3 class="text-base font-medium text-info">历史总业绩</h3>
              <span class="text-xs text-info bg-light px-2 py-1 rounded-full">
                累计数据
              </span>
            </div>
            <div class="mb-4">
              <p class="text-3xl font-bold mb-1">¥12,580,450</p>
              <div class="flex items-center text-success text-sm">
                <i class="fas fa-arrow-up mr-1"> </i>
                <span> 12.5% </span>
                <span class="text-info ml-2"> 较去年同期 </span>
              </div>
            </div>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华南团队业务 </span>
                  <span class="font-medium"> ¥7,850,230 </span>
                </div>
                <div class="progress-bar bg-gray-100">
                  <div
                    class="progress-value bg-primary"
                    style="width: 62%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华东团队业绩 </span>
                  <span class="font-medium"> ¥4,730,220 </span>
                </div>
                <div class="progress-bar bg-gray-100">
                  <div
                    class="progress-value bg-secondary"
                    style="width: 38%"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <!-- 上月业绩 -->
          <div class="bg-card-bg rounded-xl p-5 card-shadow">
            <div class="flex justify-between items-start mb-4">
              <h3 class="text-base font-medium text-info">上月业绩</h3>
              <span class="text-xs text-info bg-light px-2 py-1 rounded-full">
                2025年5月
              </span>
            </div>
            <div class="mb-4">
              <p class="text-3xl font-bold mb-1">¥985,620</p>
              <div class="flex items-center text-danger text-sm">
                <i class="fas fa-arrow-down mr-1"> </i>
                <span> 3.2% </span>
                <span class="text-info ml-2"> 较上月 </span>
              </div>
            </div>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华南团队业务 </span>
                  <span class="font-medium"> ¥582,310 </span>
                </div>
                <div class="progress-bar bg-gray-100">
                  <div
                    class="progress-value bg-primary"
                    style="width: 59%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华东团队业绩 </span>
                  <span class="font-medium"> ¥403,310 </span>
                </div>
                <div class="progress-bar bg-gray-100">
                  <div
                    class="progress-value bg-secondary"
                    style="width: 41%"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <!-- 本月/本月目标 -->
          <div class="bg-card-bg rounded-xl p-5 card-shadow">
            <div class="flex justify-between items-start mb-4">
              <h3 class="text-base font-medium text-info">本月/本月目标</h3>
              <span class="text-xs text-info bg-light px-2 py-1 rounded-full">
                2025年6月
              </span>
            </div>
            <div class="mb-4">
              <div class="flex items-end">
                <p class="text-3xl font-bold mr-2">¥785,320</p>
                <p class="text-info mb-1">/ ¥1,200,000</p>
              </div>
              <div class="w-full bg-gray-100 rounded-full h-2 mb-1 mt-3">
                <div
                  class="bg-primary h-2 rounded-full"
                  style="width: 65%"
                ></div>
              </div>
              <div class="flex justify-between text-sm text-info">
                <span> 目标完成率 </span>
                <span> 65.4% </span>
              </div>
            </div>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华南团队总业绩/总目标 </span>
                  <span class="font-medium"> ¥452,180 / ¥700,000 </span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2">
                  <div
                    class="bg-primary h-2 rounded-full"
                    style="width: 64.6%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华东团队业绩/总目标 </span>
                  <span class="font-medium"> ¥333,140 / ¥500,000 </span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2">
                  <div
                    class="bg-secondary h-2 rounded-full"
                    style="width: 66.6%"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 总营收趋势图 -->
        <div class="bg-card-bg rounded-xl p-5 card-shadow">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-base font-medium">总营收趋势（月度）</h3>
            <div class="flex space-x-2">
              <button
                id="team-filter-all"
                class="text-xs bg-primary text-white px-3 py-1 rounded-full team-filter-btn active"
                data-team="all"
              >
                全部
              </button>
              <button
                id="team-filter-south"
                class="text-xs bg-light text-info px-3 py-1 rounded-full team-filter-btn"
                data-team="south"
              >
                华南
              </button>
              <button
                id="team-filter-east"
                class="text-xs bg-light text-info px-3 py-1 rounded-full team-filter-btn"
                data-team="east"
              >
                华东
              </button>
            </div>
          </div>
          <div class="h-64">
            <div id="revenue-chart" class="w-full h-full"></div>
          </div>
        </div>
      </section>
      <!-- 运营指标 -->
      <section class="mb-6">
        <h2 class="text-lg font-semibold mb-4">运营指标</h2>
        <!-- 活动进展列表 -->
        <div class="bg-card-bg rounded-xl p-5 card-shadow mb-6">
          <div class="flex justify-between items-center mb-5">
            <h3 class="text-base font-medium">活动进展列表</h3>
            <button class="text-primary text-sm flex items-center">
              <span> 查看全部 </span>
              <i class="fas fa-angle-right ml-1"> </i>
            </button>
          </div>
          <!-- 筛选器 -->
          <div class="grid grid-cols-3 gap-2 mb-4">
            <div class="relative">
              <select
                class="w-full bg-light rounded-lg py-2 pl-3 pr-8 text-sm appearance-none focus:outline-none focus:ring-1 focus:ring-primary"
              >
                <option>全部团队</option>
                <option>华南团队</option>
                <option>华东团队</option>
              </select>
              <div
                class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none"
              >
                <i class="fas fa-chevron-down text-xs text-info"> </i>
              </div>
            </div>
            <div class="relative">
              <select
                class="w-full bg-light rounded-lg py-2 pl-3 pr-8 text-sm appearance-none focus:outline-none focus:ring-1 focus:ring-primary"
              >
                <option>全部课程</option>
                <option>产品A</option>
                <option>产品B</option>
                <option>产品C</option>
              </select>
              <div
                class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none"
              >
                <i class="fas fa-chevron-down text-xs text-info"> </i>
              </div>
            </div>
            <div class="relative">
              <select
                class="w-full bg-light rounded-lg py-2 pl-3 pr-8 text-sm appearance-none focus:outline-none focus:ring-1 focus:ring-primary"
              >
                <option>最近30天</option>
                <option>本月</option>
                <option>上月</option>
                <option>自定义</option>
              </select>
              <div
                class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none"
              >
                <i class="fas fa-chevron-down text-xs text-info"> </i>
              </div>
            </div>
          </div>
          <!-- 活动表格 -->
          <div class="overflow-x-auto">
            <table class="w-full text-sm">
              <thead>
                <tr class="text-left text-info border-b border-gray-100">
                  <th class="pb-3 font-medium">课程信息</th>
                  <th class="pb-3 font-medium">状态</th>
                  <th class="pb-3 font-medium">拼团进度</th>
                  <th class="pb-3 font-medium">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr class="border-b border-gray-100">
                  <td class="py-4">
                    <div class="flex flex-col">
                      <span class="font-medium">高级产品设计大师班</span>
                      <span class="text-xs text-gray-500 mt-1">华南团队</span>
                      <span class="text-xs text-danger mt-1">3天</span>
                    </div>
                  </td>
                  <td class="py-4">
                    <span
                      class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full"
                    >
                      进行中
                    </span>
                  </td>
                  <td class="py-4">
                    <div class="flex items-center">
                      <span class="text-xs mr-2"> 5/8 </span>
                      <div class="w-16 bg-gray-100 rounded-full h-1.5">
                        <div
                          class="bg-success h-1.5 rounded-full"
                          style="width: 62.5%"
                        ></div>
                      </div>
                    </div>
                  </td>
                  <td class="py-4">
                    <button class="text-primary text-sm">查看</button>
                  </td>
                </tr>
                <tr class="border-b border-gray-100">
                  <td class="py-4">
                    <div class="flex flex-col">
                      <span class="font-medium">数据分析与可视化</span>
                      <span class="text-xs text-gray-500 mt-1">华东团队</span>
                      <span class="text-xs text-info mt-1">12天</span>
                    </div>
                  </td>
                  <td class="py-4">
                    <span
                      class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full"
                    >
                      进行中
                    </span>
                  </td>
                  <td class="py-4">
                    <div class="flex items-center">
                      <span class="text-xs mr-2"> 3/5 </span>
                      <div class="w-16 bg-gray-100 rounded-full h-1.5">
                        <div
                          class="bg-success h-1.5 rounded-full"
                          style="width: 60%"
                        ></div>
                      </div>
                    </div>
                  </td>
                  <td class="py-4">
                    <button class="text-primary text-sm">查看</button>
                  </td>
                </tr>
                <tr class="border-b border-gray-100">
                  <td class="py-4">
                    <div class="flex flex-col">
                      <span class="font-medium">用户体验设计实战</span>
                      <span class="text-xs text-gray-500 mt-1">华南团队</span>
                      <span class="text-xs text-info mt-1">已结束</span>
                    </div>
                  </td>
                  <td class="py-4">
                    <span
                      class="px-2 py-1 bg-success/10 text-success text-xs rounded-full"
                    >
                      已完成
                    </span>
                  </td>
                  <td class="py-4">
                    <div class="flex items-center">
                      <span class="text-xs mr-2"> 8/8 </span>
                      <div class="w-16 bg-gray-100 rounded-full h-1.5">
                        <div
                          class="bg-success h-1.5 rounded-full"
                          style="width: 100%"
                        ></div>
                      </div>
                    </div>
                  </td>
                  <td class="py-4">
                    <button class="text-primary text-sm">查看</button>
                  </td>
                </tr>
                <tr>
                  <td class="py-4">
                    <div class="flex flex-col">
                      <span class="font-medium">前端开发进阶课程</span>
                      <span class="text-xs text-gray-500 mt-1">华东团队</span>
                      <span class="text-xs text-danger mt-1">1天</span>
                    </div>
                  </td>
                  <td class="py-4">
                    <span
                      class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full"
                    >
                      进行中
                    </span>
                  </td>
                  <td class="py-4">
                    <div class="flex items-center">
                      <span class="text-xs mr-2"> 6/10 </span>
                      <div class="w-16 bg-gray-100 rounded-full h-1.5">
                        <div
                          class="bg-success h-1.5 rounded-full"
                          style="width: 60%"
                        ></div>
                      </div>
                    </div>
                  </td>
                  <td class="py-4">
                    <button class="text-primary text-sm">查看</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 举办活动趋势图 -->
        <div class="bg-card-bg rounded-xl p-5 card-shadow">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-base font-medium">举办活动趋势图（按月份）</h3>
            <div class="flex space-x-2">
              <button
                id="activity-team-filter-all"
                class="text-xs bg-primary text-white px-3 py-1 rounded-full activity-team-filter-btn active"
                data-team="all"
              >
                全部
              </button>
              <button
                id="activity-team-filter-south"
                class="text-xs bg-light text-info px-3 py-1 rounded-full activity-team-filter-btn"
                data-team="south"
              >
                华南
              </button>
              <button
                id="activity-team-filter-east"
                class="text-xs bg-light text-info px-3 py-1 rounded-full activity-team-filter-btn"
                data-team="east"
              >
                华东
              </button>
            </div>
          </div>
          <div class="h-64">
            <div id="activity-chart" class="w-full h-full"></div>
          </div>
        </div>
      </section>

      <!-- 会员指标 -->
      <section class="mb-6">
        <h2 class="text-lg font-semibold mb-4">会员指标</h2>
        <!-- 会员卡片组 -->
        <div class="grid grid-cols-1 gap-4 mb-6">
          <!-- 当前会员总数 -->
          <div class="bg-card-bg rounded-xl p-5 card-shadow">
            <div class="flex justify-between items-start mb-4">
              <h3 class="text-base font-medium text-info">当前会员总数</h3>
              <span class="text-xs text-info bg-light px-2 py-1 rounded-full">
                实时数据
              </span>
            </div>
            <div class="mb-6">
              <p class="text-3xl font-bold mb-1">15,842</p>
              <!-- <div class="flex items-center text-success text-sm"> -->
                <!-- <i class="fas fa-arrow-up mr-1"> </i> -->
                <!-- <span> 8.2% </span> -->
                <!-- <span class="text-info ml-2"> 较上月 </span> -->
              <!-- </div> -->
            </div>
            <div>
              <!-- <h4 class="text-sm font-medium mb-3">团队分布</h4> -->
              <div class="grid grid-cols-2 gap-4">
                <div class="bg-light rounded-lg p-4">
                  <div class="flex justify-between items-center mb-2">
                    <span class="text-sm text-info"> 华南团队 </span>
                    <span class="text-sm font-medium"> 9,245 </span>
                  </div>
                  <!-- <div class="w-full bg-gray-200 rounded-full h-2">
                    <div
                      class="bg-primary h-2 rounded-full"
                      style="width: 58.4%"
                    ></div>
                  </div> -->
                </div>
                <div class="bg-light rounded-lg p-4">
                  <div class="flex justify-between items-center mb-2">
                    <span class="text-sm text-info"> 华东团队 </span>
                    <span class="text-sm font-medium"> 6,597 </span>
                  </div>
                  <!-- <div class="w-full bg-gray-200 rounded-full h-2">
                    <div
                      class="bg-secondary h-2 rounded-full"
                      style="width: 41.6%"
                    ></div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
          <!-- 上月会员数 -->
          <div class="bg-card-bg rounded-xl p-5 card-shadow">
            <div class="flex justify-between items-start mb-4">
              <h3 class="text-base font-medium text-info">上月会员数</h3>
              <span class="text-xs text-info bg-light px-2 py-1 rounded-full">
                2025年5月
              </span>
            </div>
            <div class="mb-4">
              <p class="text-3xl font-bold mb-1">1,258</p>
              <div class="flex items-center text-success text-sm">
                <i class="fas fa-arrow-up mr-1"> </i>
                <span> 5.3% </span>
                <span class="text-info ml-2"> 较4月 </span>
              </div>
            </div>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华南团队 </span>
                  <span class="font-medium"> 723 </span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2">
                  <div
                    class="bg-primary h-2 rounded-full"
                    style="width: 57.5%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华东团队 </span>
                  <span class="font-medium"> 535 </span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2">
                  <div
                    class="bg-secondary h-2 rounded-full"
                    style="width: 42.5%"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <!-- 本月会员数 / 转化率 -->
          <div class="bg-card-bg rounded-xl p-5 card-shadow">
            <div class="flex justify-between items-start mb-4">
              <h3 class="text-base font-medium text-info">
                本月会员数 / 转化率
              </h3>
              <span class="text-xs text-info bg-light px-2 py-1 rounded-full">
                2025年6月
              </span>
            </div>
            <div class="grid grid-cols-2 gap-4 mb-4">
              <div>
                <p class="text-3xl font-bold mb-1">842</p>
                <p class="text-info text-sm">本月新增会员</p>
              </div>
              <div>
                <p class="text-3xl font-bold mb-1">18.7%</p>
                <p class="text-info text-sm">会员转化率</p>
              </div>
            </div>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华南团队：0人（0.0%） </span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2">
                  <div
                    class="bg-primary h-2 rounded-full"
                    style="width: 0%"
                  ></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span> 华东团队：4人（0.0%） </span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2">
                  <div
                    class="bg-secondary h-2 rounded-full"
                    style="width: 0%"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 会员增长趋势图 -->
        <div class="bg-card-bg rounded-xl p-5 card-shadow">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-base font-medium">会员增长趋势图（按月份）</h3>
            <div class="flex space-x-2">
              <button
                id="member-team-filter-all"
                class="text-xs bg-primary text-white px-3 py-1 rounded-full member-team-filter-btn active"
                data-team="all"
              >
                全部
              </button>
              <button
                id="member-team-filter-south"
                class="text-xs bg-light text-info px-3 py-1 rounded-full member-team-filter-btn"
                data-team="south"
              >
                华南
              </button>
              <button
                id="member-team-filter-east"
                class="text-xs bg-light text-info px-3 py-1 rounded-full member-team-filter-btn"
                data-team="east"
              >
                华东
              </button>
            </div>
          </div>
          <div class="h-64">
            <div id="member-chart" class="w-full h-full"></div>
          </div>
        </div>
      </section>

      <!-- 渠道与推广视角 -->
      <section class="mb-6">
        <h2 class="text-lg font-semibold mb-4">渠道与推广视角</h2>
        <!-- 渠道流量趋势图 -->
        <div class="bg-card-bg rounded-xl p-5 card-shadow">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-base font-medium">渠道总流量趋势图</h3>
            <div class="flex space-x-2">
              <button
                class="text-xs bg-primary text-white px-3 py-1 rounded-full"
              >
                PV
              </button>
              <button class="text-xs bg-light text-info px-3 py-1 rounded-full">
                UV
              </button>
              <button class="text-xs bg-light text-info px-3 py-1 rounded-full">
                IP
              </button>
            </div>
          </div>
          <!-- 渠道筛选器 -->
          <div class="flex overflow-x-auto scrollbar-hide mb-6 pb-2 space-x-2">
            <button
              class="whitespace-nowrap px-4 py-1.5 bg-primary text-white rounded-full text-sm font-medium"
            >
              全部渠道
            </button>
            <button
              class="whitespace-nowrap px-4 py-1.5 bg-light text-dark rounded-full text-sm font-medium"
            >
              微信公众号
            </button>
            <button
              class="whitespace-nowrap px-4 py-1.5 bg-light text-dark rounded-full text-sm font-medium"
            >
              朋友圈
            </button>
            <button
              class="whitespace-nowrap px-4 py-1.5 bg-light text-dark rounded-full text-sm font-medium"
            >
              抖音
            </button>
            <button
              class="whitespace-nowrap px-4 py-1.5 bg-light text-dark rounded-full text-sm font-medium"
            >
              小红书
            </button>
            <button
              class="whitespace-nowrap px-4 py-1.5 bg-light text-dark rounded-full text-sm font-medium"
            >
              官网
            </button>
          </div>
          <div class="h-64">
            <div id="channel-chart" class="w-full h-full"></div>
          </div>
        </div>
      </section>
    </div>

        <!-- ActionSheet 动作面板 -->
        <div id="action-sheet-overlay" class="action-sheet-overlay"></div>
        <div id="action-sheet" class="action-sheet">
          <div class="action-sheet-header">
            <h3 class="action-sheet-title">选择同城会</h3>
            <button class="action-sheet-close" id="action-sheet-close">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="action-sheet-body">
            <div class="action-sheet-item active" data-value="zhinwubuyan">
              <span>知无不言</span>
            </div>
            <div class="action-sheet-item" data-value="tongchenghui">
              <span>同城会</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 结束 phone-screen -->
    </div>
    <!-- 结束 phone-frame -->

    <script>
      // 页面加载时初始化渲染
      document.addEventListener('DOMContentLoaded', function () {
        // 初始化图表
        initRevenueChart();
        initActivityChart();
        initMemberChart();
        initChannelChart();

        // 同城会ActionSheet事件
        initCityMeetingActionSheet();

        // 团队筛选按钮事件
        initTeamFilter();

        // 通知iframe调整大小
        ytSendPageSize();

        // 监听窗口大小变化，调整图表
        window.addEventListener('resize', function () {
          resizeCharts();
          ytSendPageSize();
        });
      });

      // 初始化同城会ActionSheet
      function initCityMeetingActionSheet() {
        var cityMeetingBtn = document.getElementById('city-meeting-btn');
        var actionSheet = document.getElementById('action-sheet');
        var actionSheetOverlay = document.getElementById('action-sheet-overlay');
        var actionSheetClose = document.getElementById('action-sheet-close');
        var actionSheetItems = document.querySelectorAll('.action-sheet-item');
        
        // 当前选中的同城会
        var currentSelected = 'tongchenghui';
        var cityNames = {
          'all': '同城会',
          'tongchenghui': '同城会'
        };

        // 显示ActionSheet
        function showActionSheet() {
          actionSheetOverlay.classList.add('show');
          actionSheet.classList.add('show');
          document.body.style.overflow = 'hidden';
        }

        // 隐藏ActionSheet
        function hideActionSheet() {
          actionSheetOverlay.classList.remove('show');
          actionSheet.classList.remove('show');
          document.body.style.overflow = '';
        }

        // 更新按钮文本
        function updateButtonText(value) {
          var btnText = cityMeetingBtn.querySelector('span') || cityMeetingBtn.childNodes[0];
          if (btnText && btnText.nodeType === 3) {
            // 如果是文本节点，需要找到包含文本的元素
            var textContent = cityNames[value] || '同城会';
            cityMeetingBtn.innerHTML = textContent + ' <i class="fas fa-chevron-down ml-1 text-xs"></i>';
          } else {
            // 如果有span元素
            if (btnText.tagName === 'SPAN') {
              btnText.textContent = cityNames[value] || '同城会';
            } else {
              cityMeetingBtn.innerHTML = cityNames[value] + ' <i class="fas fa-chevron-down ml-1 text-xs"></i>';
            }
          }
        }

        // 更新选中状态
        function updateSelected(value) {
          actionSheetItems.forEach(function(item) {
            item.classList.remove('active');
            if (item.getAttribute('data-value') === value) {
              item.classList.add('active');
            }
          });
          currentSelected = value;
          updateButtonText(value);
        }

        // 点击同城会按钮显示ActionSheet
        cityMeetingBtn.addEventListener('click', function(e) {
          e.stopPropagation();
          showActionSheet();
        });

        // 点击遮罩层关闭
        actionSheetOverlay.addEventListener('click', function() {
          hideActionSheet();
        });

        // 点击关闭按钮
        actionSheetClose.addEventListener('click', function() {
          hideActionSheet();
        });

        // 点击选项
        actionSheetItems.forEach(function(item) {
          item.addEventListener('click', function() {
            var value = this.getAttribute('data-value');
            updateSelected(value);
            hideActionSheet();
            
            // 这里可以添加筛选数据的逻辑
            simulateDataLoading(value);
          });
        });

        // 初始化按钮文本
        updateButtonText(currentSelected);
      }

      // 模拟数据加载
      function simulateDataLoading(selectedValue) {
        // 这里可以添加实际的数据加载逻辑
        console.log('筛选数据加载中...', selectedValue || '全部同城会');
      }

      // 初始化团队筛选功能
      function initTeamFilter() {
        var teamFilterButtons = document.querySelectorAll('.team-filter-btn');
        var currentTeam = 'all';

        function updateButtonState(selectedTeam, buttons) {
          buttons.forEach(function(btn) {
            var team = btn.getAttribute('data-team');
            if (team === selectedTeam) {
              btn.classList.remove('bg-light', 'text-info');
              btn.classList.add('bg-primary', 'text-white', 'active');
            } else {
              btn.classList.remove('bg-primary', 'text-white', 'active');
              btn.classList.add('bg-light', 'text-info');
            }
          });
        }

        teamFilterButtons.forEach(function(btn) {
          btn.addEventListener('click', function() {
            var team = this.getAttribute('data-team');
            if (team !== currentTeam) {
              currentTeam = team;
              updateButtonState(team, teamFilterButtons);
              // 更新图表数据
              if (window.updateRevenueChart) {
                window.updateRevenueChart(team);
              }
            }
          });
        });

        // 初始化活动趋势图的团队筛选
        var activityTeamFilterButtons = document.querySelectorAll('.activity-team-filter-btn');
        var currentActivityTeam = 'all';

        activityTeamFilterButtons.forEach(function(btn) {
          btn.addEventListener('click', function() {
            var team = this.getAttribute('data-team');
            if (team !== currentActivityTeam) {
              currentActivityTeam = team;
              updateButtonState(team, activityTeamFilterButtons);
              // 更新活动图表数据
              if (window.updateActivityChart) {
                window.updateActivityChart(team);
              }
            }
          });
        });

        // 初始化会员趋势图的团队筛选
        var memberTeamFilterButtons = document.querySelectorAll('.member-team-filter-btn');
        var currentMemberTeam = 'all';

        memberTeamFilterButtons.forEach(function(btn) {
          btn.addEventListener('click', function() {
            var team = this.getAttribute('data-team');
            if (team !== currentMemberTeam) {
              currentMemberTeam = team;
              updateButtonState(team, memberTeamFilterButtons);
              // 更新会员图表数据
              if (window.updateMemberChart) {
                window.updateMemberChart(team);
              }
            }
          });
        });
      }

      // 初始化营收趋势图
      function initRevenueChart() {
        var chartDom = document.getElementById('revenue-chart');
        var myChart = echarts.init(chartDom);
        
        // 图表数据
        var revenueData = {
          all: {
            actual: [850, 900, 950, 1050, 1100, 1150, 1100, 1250, 1350, 1400, 1650],
            completion: [110, 105, 115, 100, 120, 110, 105, 120, 105, 125, 135]
          },
          south: {
            actual: [500, 530, 560, 620, 650, 680, 650, 730, 790, 820, 980],
            completion: [110, 105, 115, 100, 120, 110, 105, 120, 105, 125, 135]
          },
          east: {
            actual: [350, 370, 390, 430, 450, 470, 450, 520, 560, 580, 670],
            completion: [110, 105, 115, 100, 120, 110, 105, 120, 105, 125, 135]
          }
        };
        
        var currentTeam = 'all';
        
        function updateChart(team) {
          var data = revenueData[team] || revenueData.all;
          var option = {
            grid: {
              left: '3%',
              right: '8%',
              bottom: '15%',
              top: '5%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            legend: {
              data: ['实际营收', '目标营收', '完成率'],
              bottom: 0,
              left: 'center',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                fontSize: 12
              }
            },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月'],
              axisLine: {
                lineStyle: {
                  color: '#E5E6EB'
                }
              },
              axisLabel: {
                fontSize: 12,
                color: '#8C8C8C'
              }
            },
            yAxis: [{
              type: 'value',
              name: '营收',
              min: 0,
              max: 1800,
              interval: 300,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#F2F3F5'
                }
              },
              axisLabel: {
                fontSize: 12,
                color: '#8C8C8C',
                formatter: '{value}'
              }
            }, {
              type: 'value',
              name: '完成率',
              min: 0,
              max: 150,
              interval: 30,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                fontSize: 12,
                color: '#8C8C8C',
                formatter: '{value}%'
              }
            }],
            series: [{
              name: '实际营收',
              type: 'bar',
              data: data.actual,
              itemStyle: {
                color: '#165DFF',
                borderRadius: [4, 4, 0, 0]
              },
              barWidth: '30%'
            }, {
              name: '目标营收',
              type: 'bar',
              data: [],
              itemStyle: {
                color: '#8C8C8C'
              },
              showSymbol: false,
              legendHoverLink: false
            }, {
              name: '完成率',
              type: 'line',
              yAxisIndex: 1,
              data: data.completion,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                color: '#FAAD14',
                width: 2
              },
              itemStyle: {
                color: '#FAAD14'
              },
              z: 10
            }]
          };
          myChart.setOption(option);
        }
        
        // 初始化图表
        updateChart(currentTeam);
        
        // 存储图表实例和更新函数
        window.revenueChart = myChart;
        window.updateRevenueChart = updateChart;
        window.revenueChartData = revenueData;
      }

      // 初始化活动趋势图
      function initActivityChart() {
        var chartDom = document.getElementById('activity-chart');
        var myChart = echarts.init(chartDom);
        
        // 图表数据
        var activityData = {
          all: {
            activityCount: [12, 19, 15, 22, 18, 25],
            groupCount: [8, 15, 10, 18, 14, 20]
          },
          south: {
            activityCount: [7, 11, 9, 13, 10, 15],
            groupCount: [5, 9, 6, 11, 7, 12]
          },
          east: {
            activityCount: [5, 8, 6, 9, 8, 10],
            groupCount: [3, 6, 4, 7, 7, 8]
          }
        };
        
        var currentTeam = 'all';
        
        function updateChart(team) {
          var data = activityData[team] || activityData.all;
          var option = {
            grid: {
              left: '3%',
              right: '4%',
              bottom: '15%',
              top: '5%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['活动数量', '成团数量'],
              bottom: 0,
              left: 'center',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                fontSize: 12
              }
            },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月'],
              axisLine: {
                lineStyle: {
                  color: '#E5E6EB'
                }
              },
              axisLabel: {
                fontSize: 12,
                color: '#8C8C8C'
              }
            },
            yAxis: {
              type: 'value',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#F2F3F5'
                }
              },
              axisLabel: {
                fontSize: 12,
                color: '#8C8C8C'
              }
            },
            series: [{
              name: '活动数量',
              type: 'bar',
              data: data.activityCount,
              itemStyle: {
                color: '#36CFC9',
                borderRadius: [4, 4, 0, 0]
              },
              barWidth: '30%'
            }, {
              name: '成团数量',
              type: 'bar',
              data: data.groupCount,
              itemStyle: {
                color: '#FAAD14',
                borderRadius: [4, 4, 0, 0]
              },
              barWidth: '30%'
            }]
          };
          myChart.setOption(option);
        }
        
        // 初始化图表
        updateChart(currentTeam);
        
        // 存储图表实例和更新函数
        window.activityChart = myChart;
        window.updateActivityChart = updateChart;
        window.activityChartData = activityData;
      }

      // 初始化会员趋势图
      function initMemberChart() {
        var chartDom = document.getElementById('member-chart');
        var myChart = echarts.init(chartDom);
        
        // 图表数据
        var memberData = {
          all: {
            newMembers: [850, 920, 1050, 980, 1258, 842],
            totalMembers: [12540, 13460, 14510, 15490, 15842, 15842]
          },
          south: {
            newMembers: [500, 540, 620, 580, 730, 490],
            totalMembers: [7350, 7890, 8510, 9090, 9245, 9245]
          },
          east: {
            newMembers: [350, 380, 430, 400, 528, 352],
            totalMembers: [5190, 5570, 6000, 6400, 6597, 6597]
          }
        };
        
        var currentTeam = 'all';
        
        function updateChart(team) {
          var data = memberData[team] || memberData.all;
          var option = {
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['新增会员', '会员总数'],
              bottom: 0,
              left: 'center',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                fontSize: 12
              }
            },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月'],
              axisLine: {
                lineStyle: {
                  color: '#E5E6EB'
                }
              },
              axisLabel: {
                fontSize: 12,
                color: '#8C8C8C'
              }
            },
            yAxis: [{
              type: 'value',
              name: '新增会员',
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#F2F3F5'
                }
              },
              axisLabel: {
                fontSize: 12,
                color: '#8C8C8C'
              }
            }, {
              type: 'value',
              name: '会员总数',
              position: 'right',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                fontSize: 12,
                color: '#8C8C8C'
              }
            }],
            series: [{
              name: '新增会员',
              type: 'bar',
              data: data.newMembers,
              itemStyle: {
                color: '#52C41A',
                borderRadius: [4, 4, 0, 0]
              },
              barWidth: '30%'
            }, {
              name: '会员总数',
              type: 'line',
              yAxisIndex: 1,
              data: data.totalMembers,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                color: '#165DFF',
                width: 2
              },
              itemStyle: {
                color: '#FFFFFF',
                borderColor: '#165DFF',
                borderWidth: 2
              },
              z: 10
            }]
          };
          myChart.setOption(option);
        }
        
        // 初始化图表
        updateChart(currentTeam);
        
        // 存储图表实例和更新函数
        window.memberChart = myChart;
        window.updateMemberChart = updateChart;
        window.memberChartData = memberData;
      }

      // 初始化渠道流量趋势图
      function initChannelChart() {
        var chartDom = document.getElementById('channel-chart');
        var myChart = echarts.init(chartDom);
        var option = {
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['微信公众号', '朋友圈', '抖音', '小红书'],
            bottom: 0,
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 12
            }
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月'],
            axisLine: {
              lineStyle: {
                color: '#E5E6EB'
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#8C8C8C'
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#F2F3F5'
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#8C8C8C',
              formatter: '{value}k'
            }
          },
          series: [{
            name: '微信公众号',
            type: 'line',
            data: [12.5, 15.3, 18.2, 16.7, 20.5, 22.3],
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#165DFF',
              width: 2
            },
            itemStyle: {
              color: '#FFFFFF',
              borderColor: '#165DFF',
              borderWidth: 2
            }
          }, {
            name: '朋友圈',
            type: 'line',
            data: [8.3, 9.5, 11.2, 10.8, 13.5, 14.2],
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#36CFC9',
              width: 2
            },
            itemStyle: {
              color: '#FFFFFF',
              borderColor: '#36CFC9',
              borderWidth: 2
            }
          }, {
            name: '抖音',
            type: 'line',
            data: [5.2, 7.8, 9.5, 12.3, 15.8, 18.5],
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#FAAD14',
              width: 2
            },
            itemStyle: {
              color: '#FFFFFF',
              borderColor: '#FAAD14',
              borderWidth: 2
            }
          }, {
            name: '小红书',
            type: 'line',
            data: [3.5, 4.8, 6.2, 7.5, 9.2, 10.8],
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#FF4D4F',
              width: 2
            },
            itemStyle: {
              color: '#FFFFFF',
              borderColor: '#FF4D4F',
              borderWidth: 2
            }
          }]
        };
        option && myChart.setOption(option);

        // 存储图表实例，用于窗口大小变化时调整
        window.channelChart = myChart;
      }

      // 调整所有图表大小
      function resizeCharts() {
        if (window.revenueChart) window.revenueChart.resize();
        if (window.activityChart) window.activityChart.resize();
        if (window.memberChart) window.memberChart.resize();
        if (window.channelChart) window.channelChart.resize();
      }

      // 当页面大小或者内容发生变化时，通知导航页面跳转iframe高度
    </script>
  </body>
</html>
